<template>
  <el-dialog
    title="修改角色"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :show-close="false"
    width="40%"
    top="2hv"
  >
    <el-form :model="role" :rules="rules" label-width="80px" ref="ruleForm">
      <el-form-item label="角色编码" prop="roleCode">
        <el-input v-model="role.roleCode" class="input_width" disabled></el-input>
      </el-form-item>
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="role.roleName" class="input_width"></el-input>
      </el-form-item>
      <el-form-item label="生效日期" prop="roleCreateTime">
        <!-- <el-input v-model="inputRule.roleCreateTime" class="input_width"></el-input> -->
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="role.roleCreateTime"
          style="width: 47.1%;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="失效日期" prop="roleInvalidTime">
        <!-- <el-input v-model="inputRule.roleInvalidTime" ></el-input> -->
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="role.roleInvalidTime"
          style="width: 47.1%;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="状态" prop="roleStatus">
        <el-radio-group v-model="role.roleStatus">
          <el-radio label="有效" border>有效</el-radio>
          <el-radio label="无效" border>无效</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="roleRemarks">
        <el-input type="textarea" v-model="role.roleRemarks" :rows="4" style="width: 72%;"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="cancle">取 消</el-button>
      <el-button type="primary" @click="updateSubmit('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { Message } from "element-ui";
export default {
  components: {},
  props: ["rowRole"],
  data() {
    return {
      role: {
        roleId: 0,
        roleCode: "",
        roleName: "",
        roleCreateTime: null,
        roleInvalidTime: null,
        roleRemarks: "",
        roleStatus: 0,
      },
      visible: true,
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符" },
        ],
      },
    };
  },
  methods: {
    cancle() {
      this.$emit("closeDialog", false);
    },
    updateSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = new URLSearchParams();
          param.append("roleName", this.role.roleName);
          param.append("roleId", this.role.roleId);
          param.append("roleStatus", this.role.roleStatus == "有效" ? 1 : 0);
          param.append("roleCreateTime", new Date(this.role.roleCreateTime));
          param.append("roleInvalidTime", new Date(this.role.roleInvalidTime));
          param.append("roleRemarks", this.role.roleRemarks);

          const that = this;
          that
            .$http({
              method: "post",
              url: "role/roleUpdate",
              data: param,
            })
            .then((res) => {
              console.log(res);
              if (res.data == 1) {
                Message({ message: "修改成功", type: "success" });
              } else {
                Message({ message: "修改失败", type: "error" });
              }
            });
          this.$emit("refreshRoleList");
          this.$emit("closeDialog", false);
        } else {
          Message({ message: "修改失败,格式输入错误", type: "error" });
        }
      });
    },
    edit() {
      this.role.roleId = this.rowRole.roleId;
      this.role.roleName = this.rowRole.roleName;
      this.role.roleCode = this.rowRole.roleCode;
      this.role.roleCreateTime = this.rowRole.roleCreateTime;
      this.role.roleInvalidTime = this.rowRole.roleInvalidTime;
      this.role.roleRemarks = this.rowRole.roleRemarks;
      this.role.roleStatus = this.rowRole.roleStatus == 1 ? "有效" : "无效";
    },
  },
  mounted() {
    console.log(this.rowRole);
    // this.role = this.rowRole;
    this.edit();
    // this.role.roleId=this.rowRole.roleId;
    // this.role.roleName=this.rowRole.roleName;
    // this.role.roleCreateTime=this.rowRole.roleCreateTime;
    // this.role.roleInvalidTime=this.rowRole.roleInvalidTime;
    // this.role.roleRemarks=this.rowRole.roleRemarks
  },
};
</script>
<style lang='less' scoped>
.input_width {
  width: 300px;
}
</style>
